Add OpenGraph tags to playlist page head #3078
Conversation
These were requested on the forums now that we have Atom feeds for playlists, and the embedded previews that use OG tags look very generic.
Forgot the indentifier in the playlist is a fully qualified URL, not just the ID
|
Hello @MonkeyDo! Thanks for updating this PR. We checked the lines you've touched for PEP 8 issues, and found:
Comment last updated at 2025-01-13 13:09:30 UTC |
We need to add OG meta tags *before* the react page is loaded (at which point react-helmet can take over) as the tags are read on page load in a lot of cases. This system should allow us to add any arbitrary og: meta tag we want on various pages as needed, with sane defaults for existing OG tags such as og:type, og:description and og:title as we have them until now.
MonkeyDo
force-pushed
the
playlist-opengraph-tags
branch
from
8adb168 to
e240a66
Compare
|
I am not sure about the Any opinions? |
This was left over from a previous failed attempt at getting the meta tags modified quicker after page load.
Use the playlist creator and number of items in the playlist instead of using the playlist description. This should be more useful than the text description of the playlist.
MonkeyDo
force-pushed
the
playlist-opengraph-tags
branch
from
4cc61b3 to
cedeaef
Compare
|
I have modified the description to show creator name and number of tracks instead of the playlist text description.
|
These were requested on the forums, now that we have Atom feeds for playlists and the embedded previews that use OG tags look very generic.
Followed docs at https://ogp.me/#type_music
My initial implementation used react-helmet (which we already use for the purpose of modifying head tags), but unfortunately that means the page must first load and run the react app before the tags are modified/added.
The solution required moving back to the flask/jinja template layer as those will be rendered to HTML directly.
I've modified our main index.html jinja template to support known and arbitrary opengraph tags, with sane defaults (same as before this PR) for title, description and type.
Once we have images for playlist thumbnails, we could consider adding that as og:image tags and testing that out.
Here is the resulting head when loading a playlist page:
N.B.: Considering LB is now a single-page-app with routing on the client-side, the opengraph tags rendered by flask will stay there even after you navigate to another page where (some of) those tags don't apply. This is not really an issue, as the meta tags are meant to be parsed by a machine once on page load while the client-side navigation is all about users in their browser page.